import React, { Component, PureComponent  } from 'react';
import { AutoSizer, List, Grid } from 'react-virtualized';
import 'react-virtualized/styles.css';

const MAX_LENGTH = 10000;

// class Row extends PureComponent{
//     render() {
//         // console.log('row');
//         const {item} = this.props;
//         console.log(this.props);
//         return (
//             <tr>
//                 <td>{item.id}</td>
//             </tr>
//         )

//     }
// }

// class Table extends PureComponent  {
//     render() {
//         console.log('table');

//         const {list} = this.props;
//         const itemStyle = {
//             color: 'red'
//         }

//         return (
//             <table>
//                 {
//                     list.map(val=> (
//                         <Row key={val.id} item = {val} />
//                     ))
//                 }
//             </table>
//         )

//     }
// }

// class B14 extends Component {

//     state = {
//         list: Array(MAX_LENGTH).fill(0).map((val, index) => ({id: index}))
//     }

//     handleClick = ()=> {
//         this.stateTime = +new Date();
//         this.setState({
//             list: [...this.state.list, {id: this.state.list.length}] // 增加一个元素
//         })
//     }

//     componentDidUpdate() {
//         console.log(+new Date() - this.stateTime);
//     }

//     render() {
//         console.log('app b14');
//         const { list } = this.state;

//         const rowRenderer = ({index})=> {
//             let val = list[index];
//             return (
//               <div
//                 key={val.id}
//               >
//                 {val.id}
//               </div>
//             )
//         }

//         return (
//             <AutoSizer style={{height: '400px'}}>
//                 {({ width, height }) => (
//                     <List
//                         height={height}
//                         rowCount={list.length}
//                         rowHeight={20}
//                         rowRenderer={rowRenderer}
//                         width={width}
//                     />
//                 )}
//             </AutoSizer>
//         )
//     }

// }




class B14 extends Component{
    constructor(props) {
        super(props);
    }



    render() {

        function cellRenderer ({ columnIndex, key, rowIndex, style }) {
            return (
              <div
                key={key}
                style={style}
              >
                {list[rowIndex][columnIndex]}
              </div>
            )
        }

        // Grid data as an array of arrays
        // const list = [
        //     ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125 /* ... */ ],
        //     ['Brian Vaughn2', 'Software Engineer', 'San Jose', 'CA', 95125 /* ... */ ],
        //     ['Brian Vaughn3', 'Software Engineer', 'San Jose', 'CA', 95125 /* ... */ ],
        //     ['Brian Vaughn4', 'Software Engineer', 'San Jose', 'CA', 95125 /* ... */ ],
        //     ['Brian Vaughn5', 'Software Engineer', 'San Jose', 'CA', 95125 /* ... */ ],
        //     ['Brian Vaughn6', 'Software Engineer', 'San Jose', 'CA', 95125 /* ... */ ],
        //     ['Brian Vaughn7', 'Software Engineer', 'San Jose', 'CA', 95125 /* ... */ ]
        //     // And so on...
        // ];

        let list = Array(MAX_LENGTH).fill(0).map((val, index) => {
            return ['Brian Vaughn' + index, 'Software Engineer', 'San Jose', 'CA', 95125];
        })

        return (
            <Grid
                cellRenderer={cellRenderer}
                columnCount={list[0].length}
                columnWidth={100}
                height={300}
                rowCount={list.length}
                rowHeight={30}
                width={1000}
            />
        )
    }

}

export default B14;